<template>
  <div id="role" class="main-box">
    <div class="content">
      <div class="left">
        <div class="left-top">
          <h3 class="title">{{ $t('角色列表') }}</h3>
          <i class="el-icon-plus" @click="goAdd"></i>
        </div>
        <BaseDialog :title="$t('添加角色')" :dialog-show.sync="dialogShow" width="40%" class="columnDialog" @submit="submit"
          footer>
          <el-form ref="addForm" :model="addForm" :rules="rules">
            <el-form-item :label="`${$t('角色名称')}:`" prop="title">
              <el-input v-model="addForm.title" />
            </el-form-item>
          </el-form>
        </BaseDialog>
        <ul class="leftNavcate">
          <li v-for="item in roleData" :key="item.id" :class="activeId == item.id ? 'activeitem' : ''"
            @click="changerole(item)">
            <span class="navtitle">{{ item.title }}</span>
            <div class="icon">
              <i v-if="item.id != 1" class="el-icon-delete" @click="delerole(item)" />
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <h4>{{ $t('权限详情') }}</h4>
        <el-tree ref="tree" :data="menuData" show-checkbox node-key="id" :default-expanded-keys="defaultExpand"
          :default-checked-keys="defaultKeys" :props="defaultProps" @check="getNode" />

        <div class="update" v-if="menuData.length">
          <el-form :data="updateForm" inline>
            <el-form-item :label="$t('选择站点')">
              <el-select v-model="updateForm.website_id" multiple :placeholder="$t('请选择站点')">
                <el-option v-for="item in siteList" :key="item.id" :label="item.domain" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('角色名称')">
              <el-input v-model="updateForm.title" class="role_title" />
            </el-form-item>
            <el-form-item>
              <el-switch v-model="updateForm.status" :active-text="$t('启用')" :inactive-text="$t('禁用')" :active-value="1"
                :inactive-value="2" active-color="var(--huocms-com-color-primary)" inactive-color="rgba(0,0,0,0.2)" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="margin-left: 20px" @click="saveEdit" :disabled="updateForm.id == 1">
                {{ $t('保存') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rolesApi from '@/api/admin.js'
export default {
  data() {
    return {
      roleData: [],
      activeId: '1',
      role_id: '',
      roleAuth: '',
      menuData: [], // 所有菜单
      defaultProps: {
        label: 'title',
        children: 'children'
      },
      defaultKeys: [], // 默认选中的节点
      defaultExpand: [], // 默认展开的节点
      addForm: {
        title: ''
      },
      rules: {
        title: [
          {
            required: 'true',
            message: this.$t('请输入角色名'),
            trigger: 'blur'
          }
        ]
      },
      dialogShow: false,
      updateForm: {
        title: '',
        status: '',
        id: '',
        group: '',
        website_id: ''
      },
      siteList: []
    }
  },
  created() {
    this.getList()
    this.siteList = this.$store.getters.siteList
  },
  methods: {
    // 获取所有权限列表
    getMenu() {
      rolesApi.roleAuth().then(res => {
        this.menuData = res.data
        this.$nextTick(() => {
          this.getRoleInfo(this.roleData[0])
        })
        // this.getCheckedKeys()
      })
    },
    // 切换角色
    changerole(val) {
      this.getRoleInfo(val)
      this.activeId = val.id
    },
    // 角色详情
    getRoleInfo(row) {
      rolesApi.roleInfo({ id: row.id }).then(res => {
        if (row.id == 1) {
          this.$refs.tree.setCheckedNodes(this.menuData)
        } else {
          this.$refs.tree.setCheckedKeys([])
          this.defaultKeys = res.data.auth
          this.$refs.tree.setCheckedKeys(res.data.auth)
        }

        this.updateForm = {
          title: res.data.title,
          status: res.data.status,
          id: res.data.id,
          group: res.data.group,
          website_id: res.data.website_id
        }
      })
    },
    getNode(val, value) {
      this.updateForm.auth = [...value.checkedKeys, ...value.halfCheckedKeys]
    },
    // 编辑角色
    saveEdit() {
      this.updateForm.kid_auth = this.$refs.tree.getCheckedKeys(true)
      rolesApi.roleUpdate(this.updateForm).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getRoleInfo(this.updateForm)
        }
      })
    },
    // 角色列表
    getList() {
      rolesApi.roleList(this.val).then(res => {
        this.roleData = res.data.reverse()
        this.getMenu()
      })
    },

    // 获取选中的菜单key
    getCheckedKeys() {
      // this.menu_ids = this.$refs.tree.getCheckedKeys()
    },

    // 新增
    goAdd() {
      this.addForm.title = ''
      this.dialogShow = true
    },
    // 添加角色
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          rolesApi.roleSave(this.addForm).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow = false
              this.getList()
            }
          })
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    },
    // 删除
    delerole(row) {
      this.$confirm(this.$t('删除该角色'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(() => {
          rolesApi.roleDelete({ id: row.id }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getList()
            }
          })
        })
        .catch(() => { })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  padding: 0;
}

.content {
  display: flex;
  justify-content: left;

  .left {
    width: 220px;

    .left-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;

      h3.title {
        font-weight: bold;
        font-size: 16px;
      }

      .el-icon-plus {
        font-weight: bold;
        color: #fff;
        background-color: var(--huocms-com-color-primary);
        border-radius: 50%;
        padding: 3px;
        font-size: 12px;
        cursor: pointer;
      }
    }

    .leftNavcate {
      list-style: none;

      li {
        cursor: pointer;
      }

      li.navtitle {
        font-size: 15px;
        font-weight: bold;
      }

      li {
        width: 100%;
        padding: 0 16px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;

        .navtitle {
          cursor: pointer;
        }

        .icon {
          display: none;

          i {
            cursor: pointer;
          }

          .el-icon-delete {
            font-weight: bold;
          }
        }
      }

      .activeitem .icon {
        display: block;
      }

      // hover的样式
      // li:hover {
      //   color: var(--huocms-com-color-primary);
      //   background: rgba(255, 125, 0, 0.06);
      //   .icon {
      //     display: block;
      //   }
      // }
      //选中的样式
      li.activeitem {
        color: var(--huocms-com-color-primary);
        background: rgba(255, 125, 0, 0.06);
      }
    }
  }

  .right {
    width: calc(100% - 220px);
    border-left: solid 1px #eee;

    h4 {
      line-height: 50px;
      border-bottom: solid 1px #eee;
      padding-left: 16px;
      font-weight: bold;
    }

    .el-tree {
      margin-top: 20px;
      margin-left: 16px;
    }

    .update {
      margin: 50px 0 10px 20px;
    }

    .half-w {
      width: 50%;
    }

    .role_title {
      width: 200px;
    }
  }
}
</style>
